<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>数字化转型创意大赛决赛</title>
	<!-- import CSS -->
	<link rel="stylesheet" href="http://npm.elemecdn.com/mint-ui@2.2.13/lib/style.css">
	<link rel="stylesheet" href="/static/main.css">
	<style>
		.mint-toast{
			background:rgba(255, 0, 0, 0.7);
		}
	</style>
</head>

<body>
	<div id="app"  class="loadHide">
		<mt-header fixed title="综合评分">
			<mt-button icon="back" slot="left" onclick="location.href = '/'">返回</mt-button>
		</mt-header>
		<div style="margin-top:60px;">
			<h3>{{ innovate.title }}</h3>
			<p v-html="innovate.description">
			</p>
		</div>

		<mt-cell title="创新性" label="分值：25">
			<mt-button size="large" type="primary" @click="openGradeSel(25, '', 'score1')">
			　{{ gradeRec.score1==null? '打分':(gradeRec.score1+'分') }}　</mt-button>
		</mt-cell>
		
		<mt-cell title="可行性" label="分值：25">
			<mt-button size="large" type="primary" @click="openGradeSel(25, '', 'score2')">
			　{{ gradeRec.score2==null? '打分':(gradeRec.score2+'分') }}　</mt-button>
		</mt-cell>

		<mt-cell title="效益性" label="分值：20">
			<mt-button size="large" type="primary" @click="openGradeSel(20, '', 'score3')">
			　{{ gradeRec.score3==null? '打分':(gradeRec.score3+'分') }}　</mt-button>
		</mt-cell>
		
		<mt-cell title="应用范围" label="分值：10">
			<mt-button size="large" type="primary" @click="openGradeSel(10, '', 'score4')">
			　{{ gradeRec.score4==null? '打分':(gradeRec.score4+'分') }}　</mt-button>
		</mt-cell>
		
		<mt-cell title="风险分析与防控" label="分值：10">
			<mt-button size="large" type="primary" @click="openGradeSel(10, '', 'score5')">
			　{{ gradeRec.score5==null? '打分':(gradeRec.score5+'分') }}　</mt-button>
		</mt-cell>
		
		
		<mt-cell title="现场表现" label="分值：10">
			<mt-button size="large" type="primary" @click="openGradeSel(10, '', 'score6')">
			　{{ gradeRec.score6==null? '打分':(gradeRec.score6+'分') }}　</mt-button>
		</mt-cell>
		
		
		<mt-cell title="总分" label="最高分：100">
			<mt-button size="large" type="primary">
			　{{ scoreSum }}分　</mt-button>
		</mt-cell>

		
		<mt-button size="large" type="primary" @click="submitGrade" style="margin-top:10px;">提交评分</mt-button>
		<mt-button type="default" size="large" @click="standard = true" style="margin-top:10px;">评分标准</mt-button>

		<mt-popup class='grade-pop' style="height:300px;overflow-x:scroll;" v-model="standard" position="bottom">
			<mt-header fixed title="评分标准说明"></mt-header>
			<div>
				
				<p style="padding:20px;margin-top:40px;">
<br />创新性（满分25分）维度内容：该创意是否为我行首创，或首次提出相应场景优化和产品组合，推出后在市场上的领先优势，有力加快推进我行数字化转型工作落地实施，是否使用了新的技术或工具，是否具有独创的功能特点和创意亮点。
<br />可行性（满分25分）维度内容：是否可直接转化为实际生产力、具有较好的扩展性，系统性能稳定性，创意办理流程设的合理性和便利性，为广大农村客户提供服务的便利性和有效性等。
<br />效益性（满分20分）维度内容：创意预期的市场竞争力，在促进我行数字化转型、提升我行市场份额和客户数量方面可能起到的效果，预计将带的经济效益或相应的品牌效应和社会反响，间接效益是否可以预见，对同业或其他行业的推动作用。
<br />应用范围（满分10分）维度内容：创意部署渠道、应用口径的多样性，配套的客服体系是否完善，预计的市场占有率，以及是否具备相应的推广营销方案。
<br />风险分析与防控（满分10分）维度内容：创意风险分析详细，风险防范体系完整。
<br />现场表现（满分10分）维度内容：展示材料准备充分，表现形式新颖，论点、论据表达清晰，时间控制准确，能有效传递创意信息、营造创新感染力。
				</p>
			</div>


		</mt-popup>
	</div>
</body>
<!-- import Vue before Mint UI -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- import JavaScript -->
<script src="http://npm.elemecdn.com/mint-ui@2.2.13/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>
<script src="/static/common.js"></script>
<script>
	new Vue({
		el: '#app',
		data: {
			item1Visible: false,
			item2Visible: false,
			item3Visible: false,
			item4Visible: false,
			item5Visible: false,
			item6Visible: false,
			item7Visible: false,
			standard: false,
			innovate: {
				id: null,
				title: '',
				description: '',

			},
			gradeRec: {
				innovateId: null,
				score1: null,
				score2: null,
				score3: null,
				score4: null,
				score5: null,
				score6: null,
				score7: 0.00
			}
			
		},
		computed:{
			scoreSum:function(){
				var sum = this.gradeRec.score1 + this.gradeRec.score2 
					+ this.gradeRec.score3 + this.gradeRec.score4 + this.gradeRec.score5 + this.gradeRec.score6 + this.gradeRec.score7;
				return sum.toFixed(2);
			}
		},
		methods: {
			openGradeSel: function (max, itemName, key) {
				var vm = this;
				
				vm.$messagebox.prompt('请输入评分：' + itemName + '(' + max + '分，保留两位小数)',{
					inputType: 'number',
					closeOnClickModal: false,
					inputValue: vm.gradeRec[key],
					inputValidator: (val) => {  
					    if (val === null) {  
					      return true;//初始化的值为null，不做处理的话，刚打开MessageBox就会校验出错，影响用户体验  
					    }
					    val = val.toString();
					    if(val.indexOf('.') > -1){
							if(val.split('.')[1].length > 2){
								return false;
							}
						}
						return true;
				  	}, inputErrorMessage: '评分仅支持2位小数'  
				}).then(({ value, action }) => {
					var score = parseFloat(value);
					if(isNaN(score)){
						vm.$toast('请输入正确的数字');
						score = '0';
					}  
					if(score > max){
					    vm.$toast({
					    		message: '该项评分不得大于' + max + '分'
					    });
					    return false;
					}
					
					var scoreStr = score.toString();
					if(scoreStr.indexOf('.') > -1){
					    if(scoreStr.split('.')[1].length > 2){
					        score = parseFloat(score.toFixed(2));
					        vm.$toast('评分仅保留2位小数');
					    }
					}
					
					vm.gradeRec[key] = score;
					return true;
				});
				
			},
			loadInnovate: function () {
				var vm = this;
				var innId = getQueryString('id');
				vm.$indicator.open();
				this.$http.get('/getInnovateItem?id=' + innId).then(response => {
					vm.$indicator.close();
					if (response.body.success) {
						vm.innovate = response.body.data;
						vm.gradeRec.innovateId = vm.innovate.id;
					}
					else {
						this.$toast(response.body.msg);
					}
				}, response => {
					this.$indicator.close();
					this.$toast('数据加载失败');
				});
			},
			submitGrade: function () {
				var vm = this;
				if(vm.gradeRec.score1 == null || vm.gradeRec.score2 == null ||
				vm.gradeRec.score3 == null || vm.gradeRec.score4 == null || vm.gradeRec.score5 == null || vm.gradeRec.score6 == null || vm.gradeRec.score7 == null){
					this.$toast('请先评分');
					return;
				}
				vm.$messagebox.confirm('是否确定提交评分？<br />分数为：'+ vm.scoreSum +'(提交后不可修改)').then(action => {
				  	vm.$indicator.open();
					this.$http.post('/submitGrade',  vm.gradeRec).then(response => {
						vm.$indicator.close();
						if (response.body.success) {
							this.$toast('评分提交成功');
							location.href = '/';
						}
						else {
							vm.$toast(response.body.msg);
						}
					}, response => {
						vm.$indicator.close();
						vm.$toast('网络错误');
					});
				});
				
				
			}
		},
		mounted: function () {
			document.getElementById('app').setAttribute('class','');
			var vm = this;
			this.$nextTick(function () {
				vm.loadInnovate();
			})
		}
	});
</script>

</html>